<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-button @click="getData()" icon="el-icon-refresh" :loading="loading">刷新</el-button>
      </el-form-item>
    </el-form>
    <c-table
      border
      class="table-sm"
      v-loading="loading"
      :columns="tableColumns"
      :data="tableData"
    ></c-table>

    <el-dialog
      top="30px"
      width="900px"
      append-to-body
      :close-on-click-modal="false"
      :before-close="beforeClose"
      :visible.sync="visible"
    >
      <pdf-view :contractId="docId" :view-mode="true" :query-id="queryId"></pdf-view>
    </el-dialog>
  </div>
</template>

<script>
import PdfView from '@/credit/views/county/unionProvince/components/PdfView'
export default {
  components: { PdfView },
  props: {
    queryId: String,
  },
  data() {
    return {
      tableName: 're_sign_record',
      loading: false,
      tableData: [],
      tableColumns: [
        { attrs: { label: '合同重做时间', prop: 'create_time' } },
        // { attrs: { label: '合同id', prop: 'doc_id' } },
        { attrs: { label: '重签原因', prop: 're_sign_des' } },
        {
          attrs: { label: '操作', align: 'center' },
          operations: [
            {
              name: '查看旧合同',
              event: this.handleView,
            },
          ],
        },
      ],
      visible: false,
      docId: '',
    }
  },
  computed: {},
  watch: {
    queryId: {
      handler: function () {
        this.getData()
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.visible = false
    },
    handleView(row = {}) {
      this.visible = true
      this.docId = row.doc_id
    },
    getData() {
      this.loading = true
      this.$api
        .getData(
          this.$serviceName,
          this.tableName,
          {
            'customer_related_id.eq': this.queryId,
          },
          { create_time: 'asc' }
        )
        .then(res => {
          this.tableData = res?.data ?? []
        })
        .finally(() => {
          this.loading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped></style>
